|
1
|
|
|
import React, { Component } from 'react' |
|
2
|
|
|
import { Redirect } from 'react-router' |
|
3
|
|
|
import Bar from './bar' |
|
4
|
|
|
|
|
5
|
|
|
export default class Visualizer extends Component { |
|
6
|
|
|
constructor (props) { |
|
7
|
|
|
super(props) |
|
8
|
|
|
|
|
9
|
|
|
this.state = { |
|
10
|
|
|
history: [], |
|
11
|
|
|
numbers: [], |
|
12
|
|
|
active: [], |
|
13
|
|
|
size: 0, |
|
14
|
|
|
scalingFactor: Math.floor(window.innerHeight) * 0.8, |
|
15
|
|
|
paused: false, |
|
16
|
|
|
finised: false, |
|
17
|
|
|
redirect: false, |
|
18
|
|
|
|
|
19
|
|
|
} |
|
20
|
|
|
|
|
21
|
|
|
this.speed = this.props.speed || 2 |
|
22
|
|
|
this.index = 0 |
|
23
|
|
|
this.algorithm = this.props.algorithm |
|
24
|
|
|
} |
|
25
|
|
|
|
|
26
|
|
|
init () {} |
|
27
|
|
|
|
|
28
|
|
|
componentDidMount () { |
|
29
|
|
|
this.listener = window.addEventListener('keydown', e => { |
|
30
|
|
|
if (e.key === 'f') { |
|
31
|
|
|
this.stop() |
|
32
|
|
|
this.setState({ |
|
33
|
|
|
nextUrl: this.props.next |
|
34
|
|
|
}) |
|
35
|
|
|
} else if (e.key === 'b') { |
|
36
|
|
|
this.stop() |
|
37
|
|
|
this.setState({ |
|
38
|
|
|
nextUrl: this.props.prev |
|
39
|
|
|
}) |
|
40
|
|
|
} |
|
41
|
|
|
}) |
|
42
|
|
|
|
|
43
|
|
|
let amount = 100 |
|
44
|
|
|
|
|
45
|
|
|
let randomNumbers = [...Array(amount).keys()].map(x => Math.random()) |
|
46
|
|
|
|
|
47
|
|
|
window.addEventListener('resize', () => { |
|
48
|
|
|
this.setState({ |
|
49
|
|
|
size: window.innerWidth / amount, |
|
50
|
|
|
scalingFactor: Math.floor(window.innerHeight) * 0.8 |
|
51
|
|
|
}) |
|
52
|
|
|
}) |
|
53
|
|
|
|
|
54
|
|
|
window.addEventListener('orientationchange', () => { |
|
55
|
|
|
this.setState({ |
|
56
|
|
|
size: window.innerWidth / amount, |
|
57
|
|
|
scalingFactor: Math.floor(window.innerHeight) * 0.8 |
|
58
|
|
|
}) |
|
59
|
|
|
}) |
|
60
|
|
|
|
|
61
|
|
|
this.setState({ |
|
62
|
|
|
size: this.props.size || window.innerWidth / amount |
|
63
|
|
|
}) |
|
64
|
|
|
|
|
65
|
|
|
this.setState({ |
|
66
|
|
|
history: this.algorithm(randomNumbers) |
|
67
|
|
|
}) |
|
68
|
|
|
|
|
69
|
|
|
this.interval = setInterval(() => { |
|
70
|
|
|
if (!this.state.paused) { |
|
71
|
|
|
this.index++ >= this.state.history.length |
|
72
|
|
|
? this.stop() |
|
73
|
|
|
: this.setState(this.state.history[this.index]) |
|
74
|
|
|
} |
|
75
|
|
|
}, 10) |
|
76
|
|
|
} |
|
77
|
|
|
|
|
78
|
|
|
componentWillUnmount () { |
|
79
|
|
|
clearInterval(this.interval) |
|
80
|
|
|
window.removeEventListener('keydown', this.listener) |
|
81
|
|
|
} |
|
82
|
|
|
|
|
83
|
|
|
start () {} |
|
84
|
|
|
|
|
85
|
|
|
stop () { |
|
86
|
|
|
clearInterval(this.interval) |
|
87
|
|
|
this.setState({ |
|
88
|
|
|
redirect: true |
|
89
|
|
|
}) |
|
90
|
|
|
} |
|
91
|
|
|
|
|
92
|
|
|
render () { |
|
93
|
|
|
// const {redirect, size, active} = this.state |
|
94
|
|
|
|
|
95
|
|
|
|
|
96
|
|
|
if (this.state.redirect) { |
|
97
|
|
|
return <Redirect to={this.props.next} /> |
|
98
|
|
|
} |
|
99
|
|
|
|
|
100
|
|
|
return ( |
|
101
|
|
|
<div |
|
102
|
|
|
className='App' |
|
103
|
|
|
style={{ |
|
104
|
|
|
margin: '0 auto', |
|
105
|
|
|
position: 'absolute', |
|
106
|
|
|
width: '100%', |
|
107
|
|
|
height: '100%' |
|
108
|
|
|
}} |
|
109
|
|
|
> |
|
110
|
|
|
<div style={{ position: 'relative', margin: '0 auto' }}> |
|
111
|
|
|
<svg width={`${window.innerWidth}px`} height={`100vh`}> |
|
112
|
|
|
{this.state.numbers.map((x, index) => { |
|
113
|
|
|
let width = this.state.size |
|
114
|
|
|
|
|
115
|
|
|
const data = { |
|
116
|
|
|
index, |
|
117
|
|
|
width, |
|
118
|
|
|
value: x * this.state.scalingFactor, |
|
119
|
|
|
fill: this.state.active.includes(index) ? '#FE6A6A' : '#72D7D1' |
|
120
|
|
|
} |
|
121
|
|
|
|
|
122
|
|
|
return <Bar key={index} data={data} /> |
|
123
|
|
|
})} |
|
124
|
|
|
</svg> |
|
125
|
|
|
</div> |
|
126
|
|
|
</div> |
|
127
|
|
|
) |
|
128
|
|
|
} |
|
129
|
|
|
} |
|
130
|
|
|
|
henrikfredriksson /
algorithm-visualizer
